<template>
  <div class="header">
    <div class="icon">
      <!--i class="fa fa-chevron-left"></i-->
      <span @click="performClick"></span>
    </div>
    <span>{{title}}</span>
  </div>
</template>

<script>
  export default {
    props: ['title'],
    methods: {
      performClick () {
        this.$emit('click')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .header {
    background-color: #e54847;
    color: #fff;

    position: relative;
    height: 50px;

    text-align: center;
    font-size: 20px;
    line-height: 50px;

    .icon {
      line-height: 50px;
      font-size: 20px;

      position: absolute;
      left: 20px;
      top: 0;

      span {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-left: 2px white solid;
        border-bottom: 2px white solid;
        transform: rotate(45deg)
      }
    }
  }

</style>
